<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    append-to-body
    @close="cancel"
  >
    <el-form
      ref="ruleFormRef"
      :label-width="80"
      :model="formData"
      :rules="formRules"
    >
      <el-row>
        <el-col :span="12" :xs="24">
          <el-form-item label="姓名" prop="staff_name">
            <el-input v-model="formData.staff_name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="部门" prop="department_id">
            <el-select v-model="formData.department_id" placeholder="请选择部门">
              <el-option label="信息中心" value="1" />
              <el-option label="研发中心" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入手机号码" maxlength="11" :disabled="!!editId" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="性别" prop="staff_sex">
            <el-select v-model="formData.staff_sex" placeholder="请选择性别">
              <el-option label="男" value="0" />
              <el-option label="女" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="入职年份" prop="entry_date">
            <el-date-picker
              v-model="formData.entry_date"
              type="year"
              placeholder="请选择入职年份"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="年龄" prop="staff_age">
            <el-input v-model="formData.staff_age" placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="职称" prop="staff_title_id">
            <el-select v-model="formData.staff_title_id" placeholder="请选择职称">
              <el-option label="初级" value="1" />
              <el-option label="中级" value="2" />
              <el-option label="高级" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="学历" prop="education_level">
            <el-select v-model="formData.education_level" placeholder="请选择学历">
              <el-option label="专科" value="1" />
              <el-option label="本科" value="2" />
              <el-option label="硕士" value="3" />
              <el-option label="博士" value="4" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="confirm"
        >确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  id: {
    type: [Number, String],
    default: ''
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})

const editId = ref(props.id)

const title = !editId.value ? '新增人员' : '编辑人员'

const dialogVisible = ref(props.modelValue)

const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])

const ruleFormRef = ref()

const state = reactive({
  formData: {},
  formRules: {
    staff_name: [
      {
        required: true,
        message: '请输入姓名'
      }
    ],
    department_id: [
      {
        required: true,
        message: '请选择部门'
      }
    ]
  },
  submitLoading: false
})

const { formData, formRules, submitLoading } = toRefs(state)

// 关闭
const close = () => {
  dialogVisible.value = false
  emit('update:modelValue', false)
  // 重置表单
  if (!unref(ruleFormRef)) return
  unref(ruleFormRef).resetFields()
  editId.value = ''
}

// 取消
const cancel = () => {
  close()
  emit('cancel')
}

// 确定
const confirm = () => {
  if (!unref(ruleFormRef)) return
  unref(ruleFormRef).validate((valid) => {
    if (!valid) return
    console.log('submit!', formData)
    submitLoading.value = true
    setTimeout(() => {
      submitLoading.value = false
      close()
      emit('confirm')
    }, 1000)
  })
}

watch(
  props,
  (val) => {
    editId.value = val.id
    dialogVisible.value = val.modelValue
  }, {
    deep: true
  }
)
</script>

<style lang="scss" scoped>

</style>
